<template>
  <div id="sendmes">
        <div class="sendhome">
            <div class="ebtop">
                <div class="left">我的订单</div>
            </div>
            <div class="writenav">
                <table border="1" width = 100% cellspacing = 0 rules = none frame=void id="aaa">
                    <tr>
                        <th width="30%">商品</th>
                        <th width="15%">数量</th>
                        <th width="15%">总价</th>
                        <th width="25%">购买时间</th>
                        <th width="15%">状态/操作</th>
                    </tr>
                </table>
            </div>
        </div>
        <div class="productlist">
            <div class="product" v-for="(item,index) in product" :key="index">
                <div class="box1">{{item.goods_name}}</div>
                <div class="box2">{{item.goods_num}}</div>
                <div class="box3">{{item.price}}</div>
                <div class="box4">{{item.add_time}}</div>
                <div class="box5"><button :class="{active: item.status!=='2'}" :disabled="item.status!=='2'" @click="shouhuo(item.id)">{{status[item.status-1]}}</button></div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  name: "sendmes",
  data() {
    return {
      status: ["商品未发货", "确定收货", "交易完成"],
      product: []
    };
  },
  created() {
    this.loadmes();
  },
  methods: {
    // 订单列表
    loadmes() {
      this.axios
        .post("User/order_list")
        .then(({ data }) => {
          console.log(data);
          this.product = data.order;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    shouhuo(id) {
      console.log(id);
      this.axios
        .post("User/order_qr_cl",{
          id: id
        })
        .then(({ data }) => {
          console.log(data);
          if (data.status === '1') {
            this.$message({message: '操作成功',type: 'success'}); 
            this.loadmes();                   
          } else if (data.status === '2') {
            this.$message({message: '操作失败',type: 'error'});                    
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  }
};
</script>
<style lang="scss">
#sendmes {
  height: 100%;
  padding-top: 105px;
  position: relative;
  box-sizing: border-box;
  .sendhome {
    position: fixed;
    top: 50px;
    right: 20px;
    left: 270px;
    background-color: #fff;
    .ebtop {
      height: 55px;
      padding: 0 83px 0 25px;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(153, 153, 153, 1);
      box-shadow: 0 -10px #f2f2f2;
      background-color: #fff;
      z-index: 99;
      .left {
        font-size: 13px;
        font-family: MicrosoftYaHei-Bold;
        color: rgba(0, 0, 0, 1);
        font-weight: 700;
        line-height: 65px;
      }
    }
    .writenav {
      height: 50px;
      padding-left: 50px;
      line-height: 50px;
      font-size: 14px;
      color: rgba(102, 102, 102, 1);
      //   text-align: left;
      background: rgba(242, 242, 242, 1);
    }
  }
  .productlist {
    .product {
      width: 100%;
      height: 100px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      color: rgba(0, 0, 0, 1);
      padding-left: 50px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px solid rgba(221, 221, 221, 1);
      .box1 {
        width: 30%;
        padding-right: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .box2,
      .box3,
      .box4,
      .box5 {
        width: 15%;
        height: 60px;
        border-left: 1px solid rgba(221, 221, 221, 1);
        text-align: center;
        line-height: 60px;
      }
      .box4 {
        width: 25%;
      }
      .box5 {
        width: 15%;
        button {
          cursor: pointer;
          width: 82px;
          height: 33px;
          background: rgba(224, 3, 0, 1);
          font-size: 12px;
          font-family: MicrosoftYaHei;
          color: rgba(255, 255, 255, 1);
          border-radius: 2px;
        }
        .active {
          cursor: default;
          background: #f2f2f2;
          color: black;
        }
      }
    }
  }

  .btn {
    margin-top: 60px;
    button {
      cursor: pointer;
      width: 82px;
      height: 33px;
      background: rgba(224, 3, 0, 1);
      font-size: 12px;
      font-family: MicrosoftYaHei;
      color: rgba(255, 255, 255, 1);
      border-radius: 2px;
    }
    button:nth-of-type(2) {
      margin-left: 25px;
      background: rgba(225, 225, 225, 1);
      color: rgba(0, 0, 0, 1);
    }
  }
}
</style>
